<template>
  <div class="company-project">
    <h1 class="title">工作经历</h1>
    <div class="company">
      <div class="company-name">北京理想汽车研发总部( 2023 年 6 月 ~ 2024 年 3 月 )</div>
      <div class="company-duty">
        <div class="left">
          <p>工作内容：</p>
        </div>
        <div class="right">
          <p>
            <span class="circle">·</span
            >独立完成项目的搭建，页面开发和维护；书写并完善项目的代码规范；
          </p>
          <p>
            <span class="circle">·</span>参与需求评审，原型设计，UI
            评审；书写技术方案文档，并参与技术方案评审 ；
          </p>
          <p>
            <span class="circle">·</span
            >负责维护公司内部组件库，封装人员选择，文件上传，批量操作，定制下拉选择等通用业务组件，并书写使用文档。
          </p>
          <p>
            <span class="circle">·</span
            >使用低代码平台搭建低复杂度的项目，并负责低代码平台的组件二开工作。
          </p>
          <p><span class="circle">·</span>负责使用 vue3 重构 vue2 的老旧项目。</p>
        </div>
      </div>
      <div class="job">
        <div class="job-name">望楼产品作战系统</div>
        <div class="skill-list">
          <div class="skill">Vue3</div>
          <div class="skill">Element Plus</div>
          <div class="skill">Typescript</div>
          <div class="skill">vxe-table</div>
          <div class="skill">pnpm</div>
          <div class="skill">vite</div>
          <div class="skill">GitLab</div>
        </div>
        <div class="project-info">
          <div class="left">
            <p>项目简介：</p>
          </div>
          <div class="right">
            <p>
              用户可以通过调整价格，抖音搜索指数，用户满意度，渠道门店数等多个参数，根据历史的销量，预测未来的销量。
              前端主要多以表格，图表等形式将结果反馈到页面上。由 CEO 李想直接提出的需求，S+ 级项目。
            </p>
          </div>
        </div>
        <div class="project-my">
          <div class="left">
            <p>我负责的：</p>
          </div>
          <div class="right">
            <p><span class="circle">·</span>独立搭建项目，完成所有页面的开发，书写技术方案文档；</p>
            <p><span class="circle">·</span>接入第三方平台，如用户中心，sentry，MDN，埋点；</p>
            <p><span class="circle">·</span>使用 vxe-table 实现动态列，多维度切换的复杂表格；</p>
            <p>
              <span class="circle">·</span>通过 requestAnimationFrame API
              实现丝滑的表格预测临界线跟随效果。
            </p>
          </div>
        </div>
      </div>
      <div class="job">
        <div class="job-name">新版用户中心</div>
        <div class="skill-list">
          <div class="skill">Vue3</div>
          <div class="skill">Element Plus</div>
          <div class="skill">Typescript</div>
          <div class="skill">vxe-table</div>
          <div class="skill">pnpm</div>
          <div class="skill">vite</div>
          <div class="skill">GitLab</div>
        </div>
        <div class="project-info">
          <div class="left">
            <p>项目简介：</p>
          </div>
          <div class="right">
            <p>
              部门的核心系统，部门内所有系统的权限管理都由该系统负责。比如系统身份，页面权限，操作权限等。
              前端主要以大量的表格，表单，树形结构的数据展示为主。
            </p>
          </div>
        </div>
        <div class="project-my">
          <div class="left">
            <p>我负责的：</p>
          </div>
          <div class="right">
            <p>
              <span class="circle">·</span>独立搭建项目，使用 vue3
              对旧版系统进行重构，并完成所有页面的开发，书写技术方案文档；
            </p>
            <p>
              <span class="circle">·</span>使用 Intersection Observer API
              完成操作日志的无限滚动效果。
            </p>
            <p>
              <span class="circle">·</span
              >难点：需要去旧项目扒系统功能，扒接口，根据自己审美设计页面。
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="company">
      <div class="company-name">大连远舢科技( 2022 年 3 月 ~ 2023 年 6 月 )</div>
      <div class="company-duty">
        <div class="left">
          <p>工作内容：</p>
        </div>
        <div class="right">
          <p><span class="circle">·</span>团队负责人（ 3人 ），主导公司全部前端工作，任务分配；</p>
          <p><span class="circle">·</span>负责旧项目的页面开发和维护，样式更正，BUG修复；</p>
          <p>
            <span class="circle">·</span
            >负责新项目的搭建，基础设施建设，技术调研及选型，页面开发和维护，书写相关文档；
          </p>
          <p>
            <span class="circle">·</span>负责制定团队开发规范，通过
            <strong>Pull Requests</strong> 进行代码审查 , 定期组织
            <strong>Code Review</strong> 会议；
          </p>
          <p>
            <span class="circle">·</span
            >负责参与需求讨论，原型设计，与品控、设计人员交涉，进行原型评审。
          </p>
        </div>
      </div>
      <div class="job">
        <div class="job-name">文龙 AIoT</div>
        <div class="skill-list">
          <div class="skill">Vue2</div>
          <div class="skill">Gitee</div>
          <div class="skill">yarn</div>
          <div class="skill">echars</div>
          <div class="skill">Antv</div>
          <div class="skill">fabric.js</div>
          <div class="skill">vite-press</div>
          <div class="skill">websocket</div>
        </div>
        <div class="project-info">
          <div class="left">
            <p>项目简介：</p>
          </div>
          <div class="right">
            <p>
              人工智能物联网，对客户现场的设备进行管理，采集现场设备的数值，通过系统进行数据的加工和展示，以及设备的反控。
            </p>
          </div>
        </div>
        <div class="project-my">
          <div class="left">
            <p>我负责的：</p>
          </div>
          <div class="right">
            <p>
              <span class="circle">·</span>通过 <strong>vue-cli</strong> ，结合<strong
              >eslint + prettier + husky + lint-staged + commitlint </strong
              >搭建现代化前端工程，通过 css 变量配置一键换肤；
            </p>
            <p>
              <span class="circle">·</span>二次封装<strong>axios</strong>，
              通过配置请求，响应拦截器，统一处理接口返回结果，添加全局的 loading，message；
            </p>
            <p>
              <span class="circle">·</span>通过<strong> echars </strong
              >实现数据可视化以及地图部分的需求；
            </p>
            <p>
              <span class="circle">·</span>通过<strong> antv-x6 </strong
              >实现拖拽生成流程图，能源流动图的需求；
            </p>
            <p>
              <span class="circle">·</span>通过<strong> video.js </strong
              >实现视频流的播放，并且通过<strong> fabric.js </strong>实现对视频，图片进行标注；
            </p>
            <p><span class="circle">·</span>通过<strong> vite-press </strong>搭建用户帮助文档；</p>
            <p>
              <span class="circle">·</span>通过<strong> websocket </strong>实时展示现场的告警信息；
            </p>
            <p>
              <span class="circle">·</span>通过<strong> ElementUI </strong
              >实现可编辑表格，单元格合并；
            </p>
            <p>
              <span class="circle">·</span>通过<strong> Axure </strong>
              完成原型设计，并参与原型评审。
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="company">
      <div class="company-name">大连陆泽科技( 2019 年 8 月 ~ 2022 年 2 月 )</div>
      <div class="company-duty">
        <div class="left">
          <p>工作内容：</p>
        </div>
        <div class="right">
          <p><span class="circle">·</span>初级开发，负责完成领导安排的任务；</p>
          <p><span class="circle">·</span>负责根据设计图进行页面的开发和维护；</p>
          <p>
            <span class="circle">·</span>参与技术分享会，率先并带领团队成员学习
            <strong>Vue3</strong>。
          </p>
        </div>
      </div>
      <div class="job">
        <div class="job-name">云鹿 CRM</div>
        <div class="skill-list">
          <div class="skill">Vue2</div>
          <div class="skill">Vue3</div>
          <div class="skill">Nuxt3</div>
          <div class="skill">Typescript</div>
          <div class="skill">ElementUI</div>
          <div class="skill">Vant</div>
          <div class="skill">Koa</div>
          <div class="skill">mysql</div>
          <div class="skill">npm</div>
          <div class="skill">GitLab</div>
        </div>
        <div class="project-info">
          <div class="left">
            <p>项目简介：</p>
          </div>
          <div class="right">
            <p>
              客户关系管理系统，包含对商家的资产（如京豆，优惠券，红包）进行管理，通过互动活动（如签到抽奖，首购复购有礼等）增加商家曝光，
              对数据进行分析展示，短信催付等业务，以及提供京东 APP 的店铺装修能力。
            </p>
          </div>
        </div>
        <div class="project-my">
          <div class="left">
            <p>我负责的：</p>
          </div>
          <div class="right">
            <p>
              <span class="circle">·</span>负责 web
              端页面的开发，使用<strong>动态组件</strong>完成动态表单，通过一个配置文件即可让不同的活动拥有不同的表单内容；
            </p>
            <p>
              <span class="circle">·</span>通过 <strong>微信 sdk</strong>，<strong>京东 sdk</strong
              >，实现小程序，朋友圈转发的功能；
            </p>
            <p>
              <span class="circle">·</span
              >负责移动端活动页面的开发，如签到抽奖，九宫格，大转盘抽奖，并形成公用基础组件供团队成员使用；
            </p>
            <p>
              <span class="circle">·</span
              >负责定制活动的开发，如集卡有礼，首购复购有礼，拼团拆分礼品等，并结合微信 sdk，京东
              sdk，实现小程序，朋友圈转发的功能。
            </p>
            <p>
              <span class="circle">·</span>通过 <strong>websocket</strong> 实现在线客服聊天的功能；
            </p>
            <p>
              <span class="circle">·</span>使用 Nuxt3
              搭建云鹿活动模板管理子系统；用于管理云鹿的活动模板，控制显示隐藏和开放时间等；
            </p>
            <p><span class="circle">·</span>通过 koa 编写 api，进行 mysql 数据库的增删改查。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.company-project {
  margin-top: 36px;
  .title {
    font-size: 25px;
    margin-top: 0;
  }
  p {
    color: #666;
    margin: 8px 0;
    position: relative;
  }
  .company {
    .company-name {
      font-size: 20px;
      color: #00665f;
      font-weight: bolder;
      margin: 8px 0;
    }
    .company-duty {
      display: flex;
      justify-content: space-between;
      .left {
      }
      .right {
        flex: 1;
      }
    }
    .job {
      .job-name {
        font-size: 18px;
        font-weight: bold;
        margin: 8px 0;
        color: #469d34;
      }
      .skill-list {
        display: flex;
        justify-content: flex-start;
        .skill {
          padding: 5px 10px;
          background-color: rgba(27, 31, 35, 0.05);
          margin: 10px 10px 5px 0;
          color: #333;
          border-radius: 4px;
          font-size: 13px;
        }
      }
      .project-info,
      .project-my {
        display: flex;
        justify-content: space-between;
        .left {
        }
        .right {
          flex: 1;
        }
      }
    }
  }
}
</style>
